import {StyleSheet, Text, View} from 'react-native';
import FAIcon from 'react-native-vector-icons/FontAwesome';
import ThemeStyles from '../../styles';
import {getRealSize, Touchable} from '../../utils';
import IconFont from '../../resource/iconfont';
import React from 'react';
import {I18n} from '../../reducers/intl';

const GumPicker = props => {
  return (
    <Touchable onPress={() => props.onPress()}>
      <View style={Styles.gumCanvas}>
        <Text style={Styles.gumNote}>{I18n.t('form.label.gumDesc')}</Text>
        <Gum
          name="molarupper"
          selected={props.gum.includes('upper')}
          iconTop={112}
          iconLeft={112}
          size={138}
        />
        <Gum
          name="molarlower"
          selected={props.gum.includes('lower')}
          iconTop={278}
          iconLeft={112}
          size={138}
        />
        {/*左上*/}
        <Gum
          name="molar11"
          selected={props.gum.includes('#11')}
          iconTop={36}
          iconLeft={128}
          labelTop={26}
          labelLeft={142}
          label="#11"
          size={60}
        />
        <GumJoin
          selected={props.join.includes('#11-#12')}
          top={48}
          left={130}
        />
        <Gum
          name="molar12"
          selected={props.gum.includes('#12')}
          iconTop={46}
          iconLeft={98}
          labelTop={38}
          labelLeft={102}
          label="#12"
          size={60}
        />
        <GumJoin
          top={62}
          left={102}
          selected={props.join.includes('#12-#13')}
        />
        <Gum
          name="molar13"
          selected={props.gum.includes('#13')}
          iconTop={62}
          iconLeft={72}
          labelTop={64}
          labelLeft={68}
          label="#13"
          size={60}
        />
        <GumJoin top={86} left={72} selected={props.join.includes('#13-#14')} />
        <Gum
          selected={props.gum.includes('#14')}
          name="molar14"
          iconTop={90}
          iconLeft={60}
          labelTop={96}
          labelLeft={42}
          label="#14"
          size={50}
        />
        <GumJoin
          selected={props.join.includes('#14-#15')}
          top={116}
          left={55}
        />
        <Gum
          selected={props.gum.includes('#15')}
          name="molar15"
          iconTop={118}
          iconLeft={54}
          labelTop={126}
          labelLeft={28}
          label="#15"
          size={44}
        />
        <GumJoin
          selected={props.join.includes('#15-#16')}
          top={138}
          left={46}
        />
        <Gum
          name="molar16"
          selected={props.gum.includes('#16')}
          iconTop={146}
          iconLeft={44}
          labelTop={158}
          labelLeft={18}
          label="#16"
          size={48}
        />
        <GumJoin
          selected={props.join.includes('#16-#17')}
          top={174}
          left={36}
        />
        <Gum
          selected={props.gum.includes('#17')}
          name="molar17"
          iconTop={180}
          iconLeft={34}
          labelTop={198}
          labelLeft={12}
          label="#17"
          size={48}
        />
        <GumJoin
          selected={props.join.includes('#17-#18')}
          top={210}
          left={28}
        />
        <Gum
          selected={props.gum.includes('#18')}
          name="molar18"
          iconTop={210}
          iconLeft={30}
          labelTop={232}
          labelLeft={8}
          label="#18"
          size={58}
        />
        <GumJoin
          selected={props.join.includes('#11-#21')}
          top={38}
          left={168}
        />
        {/*右上*/}
        <Gum
          selected={props.gum.includes('#21')}
          name="molar21"
          iconTop={34}
          iconLeft={164}
          labelTop={26}
          labelLeft={188}
          label="#21"
          size={60}
        />
        <GumJoin
          selected={props.join.includes('#21-#22')}
          top={46}
          left={214}
        />
        <Gum
          selected={props.gum.includes('#22')}
          name="molar22"
          iconTop={46}
          iconLeft={193}
          labelTop={36}
          labelLeft={232}
          label="#22"
          size={58}
        />
        <GumJoin
          selected={props.join.includes('#22-#23')}
          top={60}
          left={240}
        />
        <Gum
          selected={props.gum.includes('#23')}
          name="molar23"
          iconTop={62}
          iconLeft={218}
          labelTop={62}
          labelLeft={268}
          label="#23"
          size={58}
        />
        <GumJoin
          selected={props.join.includes('#23-#24')}
          top={88}
          left={266}
        />
        <Gum
          selected={props.gum.includes('#24')}
          name="molar24"
          iconTop={92}
          iconLeft={240}
          labelTop={92}
          labelLeft={288}
          label="#24"
          size={48}
        />
        <GumJoin
          selected={props.join.includes('#24-#25')}
          top={118}
          left={284}
        />
        <Gum
          selected={props.gum.includes('#25')}
          name="molar25"
          iconTop={118}
          iconLeft={252}
          labelTop={128}
          labelLeft={306}
          label="#25"
          size={46}
        />
        <GumJoin
          selected={props.join.includes('#25-#26')}
          top={140}
          left={296}
        />
        <Gum
          selected={props.gum.includes('#26')}
          name="molar26"
          iconTop={146}
          iconLeft={260}
          labelTop={158}
          labelLeft={314}
          label="#26"
          size={46}
        />
        <GumJoin
          selected={props.join.includes('#26-#27')}
          top={172}
          left={306}
        />
        <Gum
          selected={props.gum.includes('#27')}
          name="molar27"
          iconTop={176}
          iconLeft={266}
          labelTop={192}
          labelLeft={322}
          label="#27"
          size={50}
        />
        <GumJoin
          selected={props.join.includes('#27-#28')}
          top={208}
          left={310}
        />
        <Gum
          selected={props.gum.includes('#28')}
          name="molar28"
          iconTop={206}
          iconLeft={264}
          labelTop={228}
          labelLeft={326}
          label="#28"
          size={60}
        />
        {/*右下*/}
        <Gum
          selected={props.gum.includes('#31')}
          name="molar31"
          iconTop={422}
          iconLeft={156}
          labelTop={490}
          labelLeft={188}
          label="#31"
          size={74}
        />
        <GumJoin
          selected={props.join.includes('#31-#32')}
          top={474}
          left={208}
        />
        <Gum
          selected={props.gum.includes('#32')}
          name="molar32"
          iconTop={416}
          iconLeft={184}
          labelTop={482}
          labelLeft={235}
          label="#32"
          size={72}
        />
        <GumJoin
          selected={props.join.includes('#32-#33')}
          top={456}
          left={240}
        />
        <Gum
          selected={props.gum.includes('#33')}
          name="molar33"
          iconTop={398}
          iconLeft={212}
          labelTop={452}
          labelLeft={265}
          label="#33"
          size={66}
        />
        <GumJoin
          selected={props.join.includes('#33-#34')}
          top={430}
          left={270}
        />
        <Gum
          selected={props.gum.includes('#34')}
          name="molar34"
          iconTop={376}
          iconLeft={236}
          labelTop={422}
          labelLeft={288}
          label="#34"
          size={62}
        />
        <GumJoin
          selected={props.join.includes('#34-#35')}
          top={396}
          left={292}
        />
        <Gum
          selected={props.gum.includes('#35')}
          name="molar35"
          iconTop={356}
          iconLeft={258}
          labelTop={388}
          labelLeft={312}
          label="#35"
          size={48}
        />
        <GumJoin
          selected={props.join.includes('#34-#35')}
          top={370}
          left={304}
        />
        <Gum
          selected={props.gum.includes('#36')}
          name="molar36"
          iconTop={328}
          iconLeft={270}
          labelTop={356}
          labelLeft={316}
          label="#36"
          size={44}
        />
        <GumJoin
          selected={props.join.includes('#36-#37')}
          top={330}
          left={312}
        />
        <Gum
          selected={props.gum.includes('#37')}
          name="molar37"
          iconTop={295}
          iconLeft={272}
          labelTop={316}
          labelLeft={322}
          label="#37"
          size={44}
        />
        <GumJoin
          selected={props.join.includes('#37-#38')}
          top={300}
          left={314}
        />
        <Gum
          selected={props.gum.includes('#38')}
          name="molar38"
          iconTop={254}
          iconLeft={268}
          labelTop={278}
          labelLeft={326}
          label="#38"
          size={58}
        />
        <GumJoin
          selected={props.join.includes('#31-#41')}
          top={480}
          left={170}
        />
        {/*左下*/}
        <Gum
          selected={props.gum.includes('#41')}
          name="molar41"
          iconTop={424}
          iconLeft={126}
          labelTop={490}
          labelLeft={150}
          label="#41"
          size={74}
        />
        <GumJoin
          selected={props.join.includes('#41-#42')}
          top={476}
          left={136}
        />
        <Gum
          selected={props.gum.includes('#42')}
          name="molar42"
          iconTop={418}
          iconLeft={99}
          labelTop={482}
          labelLeft={106}
          label="#42"
          size={70}
        />
        <GumJoin
          selected={props.join.includes('#42-#43')}
          top={458}
          left={106}
        />
        <Gum
          selected={props.gum.includes('#43')}
          name="molar43"
          iconTop={406}
          iconLeft={82}
          labelTop={455}
          labelLeft={74}
          label="#43"
          size={60}
        />
        <GumJoin
          selected={props.join.includes('#43-#44')}
          top={432}
          left={78}
        />
        <Gum
          selected={props.gum.includes('#44')}
          name="molar44"
          iconTop={376}
          iconLeft={60}
          labelTop={425}
          labelLeft={50}
          label="#44"
          size={62}
        />
        <GumJoin
          selected={props.join.includes('#44-#45')}
          top={399}
          left={60}
        />
        <Gum
          selected={props.gum.includes('#45')}
          name="molar45"
          iconTop={356}
          iconLeft={54}
          labelTop={390}
          labelLeft={30}
          label="#45"
          size={48}
        />
        <GumJoin
          selected={props.join.includes('#45-#46')}
          top={374}
          left={46}
        />
        <Gum
          selected={props.gum.includes('#46')}
          name="molar46"
          iconTop={330}
          iconLeft={42}
          labelTop={360}
          labelLeft={20}
          label="#46"
          size={44}
        />
        <GumJoin
          selected={props.join.includes('#46-#47')}
          top={334}
          left={36}
        />
        <Gum
          selected={props.gum.includes('#47')}
          name="molar47"
          iconTop={296}
          iconLeft={38}
          labelTop={314}
          labelLeft={16}
          label="#47"
          size={42}
        />
        <GumJoin
          selected={props.join.includes('#47-#48')}
          top={300}
          left={30}
        />
        <Gum
          selected={props.gum.includes('#48')}
          name="molar48"
          iconTop={258}
          iconLeft={32}
          labelTop={274}
          labelLeft={10}
          label="#48"
          size={48}
        />
      </View>
    </Touchable>
  );
};

const GumJoin = props => (
  <>
    <FAIcon
      style={[
        Styles.gumIcon,
        {top: getRealSize(props.top), left: getRealSize(props.left)},
      ]}
      name={props.selected ? 'circle' : 'circle-o'}
      color={props.selected ? ThemeStyles.Color.primary.color : '#999'}
      size={getRealSize(props.size || 12)}
    />
  </>
);

const Gum = props => (
  <>
    <IconFont
      style={[
        Styles.gumIcon,
        {top: getRealSize(props.iconTop), left: getRealSize(props.iconLeft)},
      ]}
      name={props.name}
      color={props.selected ? ThemeStyles.Color.primary.color : '#999'}
      size={getRealSize(props.size || 14)}
    />
    {props.label && (
      <Text
        style={[
          Styles.gumLabel,
          {
            top: getRealSize(props.labelTop),
            left: getRealSize(props.labelLeft),
          },
        ]}>
        {props.label}
      </Text>
    )}
  </>
);

export default GumPicker;

const Styles = StyleSheet.create({
  gumContainer: {},
  gumNote: {
    fontSize: getRealSize(8),
    color: ThemeStyles.Color.primary.color,
    margin: getRealSize(4),
  },
  gumCanvas: {
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#eee',
    flex: 1,
    width: getRealSize(335),
    height: getRealSize(528),
  },
  gumBackground: {
    resizeMode: 'contain',
    // position: 'absolute',
    width: getRealSize(335),
    height: getRealSize(498),
  },
  gumIcon: {
    position: 'absolute',
  },
  gumLabel: {
    position: 'absolute',
    width: 24,
    color: '#999',
    fontSize: getRealSize(10),
  },
});
